<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- meta使用viewport以确保页面可自由缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 引入 jQuery Mobile 样式 -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

        <!-- 引入 jQuery 库 -->
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <!-- 引入 jQuery Mobile 库 -->
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <title>Title</title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>输入密码</h1>
            </div>
            <div data-role="main" class="ui-content">

                <div class="ui-field-contain">
                    <label>ID：</label>
                    <input type="text" class="id">
                </div>
                <div class="ui-field-contain">
                    <label>密码：</label>
                    <input type="text" class="password">
                </div>
                <div style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
                    <button class="login" style="width: 20%">登录</button>
                </div>
                <div style="text-align: right">
                    <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" >注册</a>
                </div>

                <div class="errormessage" style="width: 100%;text-align: center">

                </div>

                <div data-role="popup" id="myPopupDialog">
                    <div data-role="header">
                        <h1>注册账号</h1>
                    </div>

                    <div data-role="main" class="ui-content">
                        <label>昵称：</label>
                        <input type="text" class="userName">
                        <label>密码：</label>
                        <input type="text" class="userPassword">
                        <label>头像（使用网络资源）：</label>
                        <input type="text" class="picture">
                        <div style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
                            <button class="registered" style="width: 40%">注册</button>
                        </div>
                        <div class="successmessage" style="width: 100%;text-align: center">

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </body>
    <script>
    $(".login").click(function () {
        let id = $(".id").val();
        let password = $(".password").val();
        if(id===''||password===''){
            $(".errormessage").html("请输入账号和密码!")
        }else{
            $.post("http://localhost:8080/login",{userId:id,password:password},function(data){
                console.log(data)
                if(data==="true"){
                    window.location.href="./message/test?id="+id;
                }else{
                    $(".errormessage").html("密码错误！请重新输入...")
                }
            });
        }
    })
    $(".registered").click(function () {
        let userName = $(".userName").val();
        let password = $(".userPassword").val();
        let picture = $(".picture").val();
        if(userName===''||password===''||picture===''){
            $(".successmessage").html('<p>请完善信息！</p>')
        }else{
            $.post("http://localhost:8080/registered",{password:password,userName:userName,picture:picture},function (data) {
                $(".successmessage").html('<p>注册成功！您的Id为 '+data+'<br/>返回登录</p>')
            })
        }
    })
    </script>
</html>